<!--  -->
<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="show"
      width="650px"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      :before-close="handleClose"
    >
      <div class="dialog-content" v-if="show">
        <el-tree
          :data="treeData"
          :props="defaultProps"
          :highlight-current="true"
          :default-expanded-keys="[this.label]"
          :node-key="nodeKey"
          ref="treeBox"
          class="elTree"
          :show-checkbox="treeObj.type === 'checkbox' ? true:false"
          :check-strictly="treeObj.type === 'checkbox' ? true:false"
          @node-click="handleNodeClick"
          @check-change="handleCheckClick"
          lazy
          :load="loadNode"
        ></el-tree>
      </div>
      <span slot="footer">
        <el-button @click="confirm" type="primary" size="medium">确 定</el-button>
        <el-button @click="handleClose" size="medium">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 
      使用规则：import GetDwbm from "@/dialogCommom/GetDwbm";   
              <GetDwbm :treeObj="treeObj" ref="getDwbmRef" @handleGetDwbm="handleGetDwbm"></GetDwbm>
              treeObj: {
                type: radio 单选/ checkbox 多选
                dwbm: 单位编码
              }
              handleGetDwbm  数据回传方法
     -->
  </div>
</template>

<script>
import { getTree } from "../api/dmgl/dwbm";

export default {
  props: {
    treeObj: {
      type: Object,
      default: function () {
        return {
          dwmc: "",
          type: "radio"
        }
      }
    }
    
  },
  data() {
    return {
      show: false,
      treeData: [],
      defaultProps: {
        label: "label",
        children: "child",
        isLeaf: "leaf",
      },
      label: "",
      nodeKey: "label",
      callCheckData: [],
      callRadioData: [],
      title: '',

    };
  },

  components: {},

  computed: {},

  watch: {},

  computed: {},

  created() {
    console.log('this.treeObj', this.treeObj)
  },

  mounted() {},

  beforeUpdate() {
    //解决列配置引发的滚动条问题
  },

  update() {},

  destroyed() {},

  methods: {
    /**打开弹窗 */
    openDwbm() {
      const that = this
      that.show = true;
      let response = JSON.parse(sessionStorage.getItem('czdwinfo'))
      let getUserInfo = JSON.parse(sessionStorage.getItem('userinfo'))
      this.dwmc = getUserInfo.dwmc
      this.nowDwmc = response.dwmc
      if (response.dwbm && response.dwmc) {
        // that.title = '单位编码选择【当前使用单位：' + response.dwbm + ' ' + response.dwmc + '】'
        that.title = '单位编码选择'
      } else {
        that.title = '单位编码选择'
      }
    },
    /**关闭弹窗 */
    handleClose() {
      this.show = false;
    },
    /**确定 */
    confirm() {
      if(this.callData && this.callData.length == 0){
        this.$message.warning('请至少选择一个停电单位！')
        return false;
      }
      if(this.treeObj.type === 'checkbox') {
        this.$emit('handleGetDwbm', this.callCheckData);
      }else if(this.treeObj.type === 'radio') {
        this.$emit('handleGetDwbm', this.callRadioData);
      }
      this.show = false;
      this.callCheckData = [];
      this.callRadioData = [];
    },
    /**选择树节点 */
    handleCheckClick(data, checked, node) {
      let res = this.$refs.treeBox.getCheckedNodes()
      this.callCheckData = res;
    },
    /**点击树节点 */
    handleNodeClick(data) {
      this.callRadioData = data;
    },
    /**树的懒加载 */
    loadNode(node, resolve) {
      if (node.level === 0) {
        this.getTreeLevel(resolve);
      } else if (node.level >= 1) {
        this.getNextTree(node, resolve);
      }
    },

    /**获取一级节点数据 */
    async getTreeLevel(resolve) {
      const that = this
      let reqData = {
        dwbm: '0',
        root: '1'
      }
      if (that.treeObj.dwbm) {
        reqData.dwbm = that.treeObj.dwbm
      }
      
      let res = await getTree(reqData)
      if (res.code === 0) {
        that.label = res.data[0].label;
        that.treeData = res.data;
        return resolve(res.data);
      } else {
        that.$message.error(res.message);
      }
    },

    /**获取下级节点数据 */
    async getNextTree(node, resolve) {
      let reqData = {
        dwbm: node.data.id,
        root: "0",
      };
      let res = await getTree(reqData);
      if (res.code === 0) {
        let req = res.data;
        // for (let i = 0; i < req.length; i++) {
        //     if (req[i].data.dwjb > 3) {
        //       req[i].name = "leaf";
        //       req[i].leaf = true;
        //     }
        //   }
        return resolve(req);
      } else {
        this.$message.error(res.message);
      }
    },
  },
};
</script>
<style lang='scss' scoped>
/deep/ .el-tree-node__content{
  &:hover{
    background-color: #e4f0fd;
  }
}
/deep/ .el-tree-node.is-current > .el-tree-node__content {
    background-color: #e4f0fd !important;
  }
.dialog-content {
  width: 100%;
}
.tree-container {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.dialog-content{
  width: 100%;
  height: 300px;
  overflow: auto;
}
/deep/ .el-tree > .el-tree-node {
  min-width: 100%;
  display: inline-block;
}
/deep/ .el-dialog__footer{
  padding: 5px 10px 5px;
}
/deep/ .el-dialog__header{
  padding: 4px 10px 4px;
  line-height: 40px;
}
/deep/ .el-dialog__headerbtn{
  top: 10px;
}

</style>